<template>
  <button 
    class="tech-button" 
    :class="[
      `tech-button--${type}`, 
      { 'tech-button--glow': glow,
        'tech-button--disabled': disabled }
    ]"
    :disabled="disabled"
    @click="handleClick">
    <div class="tech-button__content">
      <slot></slot>
    </div>
  </button>
</template>

<script>
export default {
  name: 'TechButton',
  props: {
    type: {
      type: String,
      default: 'primary',
      validator: (value) => {
        return ['primary', 'secondary', 'success', 'warning', 'danger', 'info'].includes(value)
      }
    },
    glow: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleClick(event) {
      if (!this.disabled) {
        this.$emit('click', event)
      }
    }
  }
}
</script>

<style scoped>
.tech-button {
  position: relative;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 4px;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease;
  background: var(--medium-bg);
  color: var(--text-primary);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.tech-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: 0.5s;
}

.tech-button:hover::before {
  left: 100%;
}

.tech-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

.tech-button--primary {
  background: var(--gradient-primary);
  color: #fff;
}

.tech-button--secondary {
  background: linear-gradient(135deg, #2c3e50, #4a6990);
  color: #fff;
}

.tech-button--success {
  background: linear-gradient(135deg, #06d6a0, #1b9aaa);
  color: #fff;
}

.tech-button--warning {
  background: linear-gradient(135deg, #ffd166, #f0a202);
  color: #1a1a2e;
}

.tech-button--danger {
  background: linear-gradient(135deg, #ef476f, #d1495b);
  color: #fff;
}

.tech-button--info {
  background: linear-gradient(135deg, #3d5a80, #293e56);
  color: #fff;
}

.tech-button--glow {
  animation: button-glow 2s infinite;
}

.tech-button--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

@keyframes button-glow {
  0% {
    box-shadow: 0 0 5px rgba(0, 204, 255, 0.5);
  }
  50% {
    box-shadow: 0 0 20px rgba(0, 204, 255, 0.8);
  }
  100% {
    box-shadow: 0 0 5px rgba(0, 204, 255, 0.5);
  }
}
</style> 